<template>
    <!-- 重要事项提醒 -->
    <div class='warn'>
        <div class="top">
            <centerHeader @time_filter_click="time_filter_click" :time_filter_flag="time_filter_flag"
                @allClick="allClick" :all_flag="all_flag" :headerText="headerText"></centerHeader>


        </div>
        <div class="content">
            <ul v-for="(itme, index) in list" :key="index" class="uu df js-sb">
                <div style="width: 90%;">
                    <div class="df" style="justify-content: space-between;align-items: center; margin-bottom: 20px;">
                        <h4>信息预警:{{itme.abnormalMessage}}</h4>
                        <p style="color:red" class="timer">上传时间: <span>{{itme.createdTime}}</span></p>
                    </div>
                    <el-table :data="itme.row" style="width: 100%">
                        <el-table-column prop="A" label="销售部门" width="160" fixed>
                        </el-table-column>
                        <el-table-column prop="B" label="往来单位编码" width="160">
                        </el-table-column>
                        <el-table-column prop="C" label="往来单位" width="160">
                        </el-table-column>
                        <el-table-column prop="D" label="币别" width="160">
                        </el-table-column>
                        <el-table-column prop="E" label="原币(尚未收款金额)" width="160">
                        </el-table-column>
                        <el-table-column prop="F" label="原币(0-30天)" width="160">
                        </el-table-column>
                        <el-table-column prop="G" label="原币(31-60天)" width="160">
                        </el-table-column>
                        <el-table-column prop="H" label="原币(61-90天)" width="160">
                        </el-table-column>
                        <el-table-column prop="I" label="原币(90天以上)" width="160">
                        </el-table-column>
                    </el-table>
                </div>
                <div style="width: 10%;align-items: center;padding-left: 30px;box-sizing: border-box;" class="df">
                   <el-button type="parmer" @click.stop="over(itme)">{{itme.isRemind===1?'未读':'已读'}}</el-button>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
import { warnTable,warnTables } from '@/api/threeTable'
import centerHeader from './centerHeader.vue'
export default {
    name: '',
    components: { centerHeader },
    data() {
        return {
            // texts:'未读',
            list: [],
            time_filter_flag: 0,//时间筛选切换
            all_flag: 0,
            headerText: "重要事项提醒",
        }
    },
    created() {

        console.log(this.table, '0000');
        this.getInfo()
    },
    mounted() {

    },
    methods: {
      async over(itme) {
      itme.isRemind = 0
       const res = await warnTables({id:itme.id,isRemind:0})
      },


        async getInfo() {
            console.log('4444');
            const res = await warnTable({
                currPage: 1,
                pageSize: 5,
                personId: 12
            })
            this.list = res.data.list
            console.log(this.list,'22222');
            // this.list1 = res.data.list[1].row
            // this.ids = res.data.list[1].id
            console.log(res, '666666666666');
            // this.abnormalMessage = res.data.list[1].abnormalMessage
            // this.createdTime = res.data.list[1].createdTime
            //    this.list1 = res.data.list[]
        },
        time_filter_click(index) {//时间筛选点击事件
            console.log(index)
            this.time_filter_flag = index
        },
        allClick(index) {
            this.all_flag = index
        },


        //     destroyed () {
        //     // 销毁监听
        //     this.socket.onclose = this.close
        // }

    }
}
</script>
<style scoped lang='scss'>
.top {
    height: 150px;

    h4 {
        font-weight: 600;
    }
}

.content {
    overflow: scroll;
    height: calc(100% - 60px);
    width: 100%;

    .uu {
        background-color: #fff;
        box-shadow: 0 0 10px 0 #ccc;
        padding: 15px 20px;
        position: relative;

        li {
            color: #C2C2C2;
            padding: 5px 0;

            .a {
                display: inline-block;
                width: 120px;
                text-align: right;

            }
        }

        .cu {
            color: #000;
            font-weight: 600;
        }
    }

}

.warn {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 120px);
    overflow: hidden;

}

.timer{
    position: absolute;
    right: 0;
    top: 30PX;
    transform: translateX(-50%);
}
</style>
